<template>
    <div class="center artical-page">
        <Page
            :total="total"
            show-elevator
            show-sizer
            show-total
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="onChange"
            @on-page-size-change="onPageSizeChange"
        />
    </div>
</template>
<script>
    export default {
        props: {
            // 总量
            total: {
                type: Number,
                default: 0
            }
        },
        data () {
            return {
                pageSize: 20,
                pageSizeOpts: [20, 30, 50]
            };
        },
        methods: {
            /**
             * 页码改变事件
             * @param {Number} page 当前页码
             */
            onChange (page) {
                this.$emit('onPageChange', page);
            },
            /**
             * 每页条数改变事件
             * @param {Number} pageSize 当前选择的每页条数
             */
            onPageSizeChange (pageSize) {
                this.pageSize = pageSize;
                this.$emit('onPageSizeChange', pageSize);
            }
        }
    };
</script>
<style lang="less" scoped>
@import "~assets/styles/variable.less";
.artical-page {
    display: flex;
    align-items: center;
    height: 60px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: @color-content-background;
}
</style>
